<template>
  <div class="h-full flex flex-col">
    <a-card>
      <p class="title">{{ $t('user.verification-code.required111566110577335') }}</p>
      <div class="card-list">
        <div class="card">
          <img src="@/assets/homePage/001.png" alt="">
          <div class="text">
            <p>数据资产</p>
            <p>Data Inwentory</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/002.png" alt="">
          <div class="text">
            <p>数据发现</p>
            <p>Data Discovery</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/003.png" alt="">
          <div class="text">
            <p>数据分类分级</p>
            <p>Data Categorization and</p>
            <p>Classification</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/004.png" alt="">
          <div class="text">
            <p>数据处理活动</p>
            <p>Register Processing</p>
            <p>Activities (RPA)</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/005.png" alt="">
          <div class="text">
            <p>数据保护影响评估</p>
            <p>Data Protection Impact</p>
            <p>Assessment (DPIA)</p>
          </div>
        </div>
      </div>
      <div class="card-list">
        <div class="card">
          <img src="@/assets/homePage/006.png" alt="">
          <div class="text">
            <p>风险管理</p>
            <p>Risk Management</p>
            <p>(Action follow up)</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/007.png" alt="">
          <div class="text">
            <p>数据资产地图</p>
            <p>Data Asset Map</p>
          </div>
        </div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
      <p class="title">数据主体权利（DSR）</p>
      <div class="card-list">
        <div class="card">
          <img src="@/assets/homePage/008.png" alt="">
          <div class="text">
            <p>数据主体权利</p>
            <p>DSR</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/009.png" alt="">
          <div class="text">
            <p>数据流图</p>
            <p>Data Flow</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/010.png" alt="">
          <div class="text">
            <p>隐私政策</p>
            <p>Privacy Policy</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/011.png" alt="">
          <div class="text">
            <p>客户同意管理</p>
            <p>Consent & Preference</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/012.png" alt="">
          <div class="text">
            <p>数据留存管理</p>
            <p>Data Retention</p>
          </div>
        </div>
      </div>
      <p class="title">数据泄露</p>
      <div class="card-list">
        <div class="card">
          <img src="@/assets/homePage/013.png" alt="">
          <div class="text">
            <p>数据泄露处理</p>
            <p>Data Breach Handing</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/014.png" alt="">
          <div class="text">
            <p>第三方管理</p>
            <p>Third Party Management</p>
          </div>
        </div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>
      <p class="title">报告和备案</p>
      <div class="card-list">
        <div class="card">
          <img src="@/assets/homePage/015.png" alt="">
          <div class="text">
            <p>数据跨境评估</p>
            <p>Data Cross-border</p>
            <p>Assessment</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/016.png" alt="">
          <div class="text">
            <p>年报</p>
            <p>Vehicle Annual Report</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/017.png" alt="">
          <div class="text">
            <p>风险自评估报告</p>
            <p>Self Risk Assessment</p>
            <p>Report</p>
          </div>
        </div>
        <div class="card">
          <img src="@/assets/homePage/018.png" alt="">
          <div class="text">
            <p>内部审计</p>
            <p>Internal Audit</p>
          </div>
        </div>
        <div class="card"></div>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.title {
  color: #3d457b;
  font-size: 18px;
  line-height: 40px;
}
.card-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  .card {
    position: relative;
    width: 260px;
    height: 150px;
    color: #3d457b;

    .text {
      line-height: 20px;
      font-size: 14px;
      position: absolute;
      top: 20px;
      left: 20px;

      p:nth-child(1) {
        font-size: 18px;
      }
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 260px;
      height: 150px;
    }
  }
}
</style>